<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body style="display: flex;flex-direction: row">
<div style="flex: 1">
    <h3>原图</h3>
    <img style="width: 50px;height: 50px;" src="img/img.png">
    <h3>原图 放大两倍：边沿模糊</h3>
    <img style="width: 100px;height: 100px;" src="img/img.png">
    <h3>原图 拉伸宽度三倍：边沿模糊并且变形</h3>
    <img style="width: 150px;height: 100px;" src="img/img.png">
    <h3>原图 拉伸高度三倍：边沿模糊并且变形</h3>
    <img style="width: 50px;height: 150px;" src="img/img.png">
</div>

<div style="flex: 1">
    <h3>.9原图</h3>
    <div class="test" style="width: 80px;height: 80px;" p9-src="img/img.9.png"></div>
    <h3>.9原图 放大两倍</h3>
    <div class="test" style="width: 160px;height: 160px;" p9-src="img/img.9.png"></div>
    <h3>.9原图 拉伸宽度三倍</h3>
    <div class="test" style="width: 180px;height: 80px;" p9-src="img/img.9.png"></div>
    <h3>.9原图 拉伸高度三倍</h3>
    <div class="test" style="width: 80px;height: 180px;" p9-src="img/img.9.png"></div>
</div>

<script src="js/P9.js"></script>

<script type="text/javascript">
    P9.init("test");
</script>

</body>
</html>
